<template>
	<view class="wrap">
		<u-navbar :title="$t('sjmx')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="Data_tab">
				<view class="item" v-for="(item, index) in Data_tab" :key="index" :class="{ item1: Data_tab_index == index }" @tap="Datatab(index)">{{ item }}</view>
			</view>
			<view class="Data_nr">
				<view class="Data_nr_title">
					<view class="item">{{$t('riqi')}}</view>
					<view class="item">{{$t('jyd')}}</view>
					<view class="item">{{$t('shouyi')}}</view>
				</view>
				<view class="Data_nr_li">
					<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
						<view class="Data_nr_list" v-for="(item, index) in list" :key="index" @tap="toPage(item)">
							<view class="item">{{ item.createDate }}</view>
							<view class="item">{{ item.currencyPair }}</view>
							<view class="item" :class="item.profitType == 'loss' ? 'item3':'item2'">{{ item.grandAmount }} {{ item.costUnit }}</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			Data_tab: [this.$t('xianhuo'), this.$t('heyue')],
			Data_tab_index: 0,
			quantifyType: 'SPOT',
			list: []
		};
	},
	methods: {
		// 下拉刷新
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		// 上拉加载
		upCallback(page) {
			this.$api.dataApi
				.getQuantifyRewardInfo({
					page: page.num,
					quantifyType: this.quantifyType
				})
				.then(res => {
					let list = res.data.userProfitRecords || [];
					this.mescroll.endSuccess(list.length);
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(list); //追加新数据
				})
				.catch(err => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		Datatab(index) {
			this.Data_tab_index = index;
			this.quantifyType = index == 0 ? 'SPOT' : 'CONTRACT';
			this.mescroll.resetUpScroll();
		},
		toPage(item) {
			console.log(item);
			uni.navigateTo({
				url: '/pages/Data/DataBreakdown/details/details?item=' + JSON.stringify(item)
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.Data_tab {
	display: flex;
	padding: 18rpx $nr-padd;
	.item {
		font-size: 28rpx;
		margin-right: 40rpx;
		color: $tom-text-sub-color2;
		position: relative;
	}
	.item1 {
		color: $text-color;
		font-weight: bold;
	}
	.item1::before {
		content: '';
		position: absolute;
		bottom: -12rpx;
		left: 0rpx;
		width: 100%;
		height: 4rpx;
		background-color: $text-color;
	}
}
.Data_nr {
	flex: 1;
	margin: 20rpx $nr-padd $nr-padd;
	background-color: #fff;
	border-radius: 18rpx;
	color: $tom-text-color;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 50rpx 50rpx 0rpx 0rpx;
}
.Data_nr_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	border-bottom: 2rpx solid $page-bg;
	.item {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}
}
.Data_nr_li {
	flex: 1;
	overflow: auto;
	background-image: url('/static/new_images/showPopup.png');
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 800rpx;
}
.Data_nr_list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0px;
	border-bottom: 2rpx solid $page-bg;
	
	.item {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color:$tom-text-sub-color2;
	}
	.item2 {
		color: $tom-text-green;
	}
	.item3 {
		color: $tom-text-red;
	}
}
</style>
